<template>
	<view class="page">

		<!-- 导航条 -->
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed"
				:style="{ height: $wanlshop.wanlsys().height + 'px', paddingTop: $wanlshop.wanlsys().top + 'px'}">
				<view class="action" @tap="$wanlshop.back(1)">
					<text class="wlIcon-fanhui1"></text>
				</view>
				<view class="search-form round">
					<text class="wlIcon-sousuo1 text-bold"></text>
					<input type="text" maxlength="12" confirm-type="search" placeholder-style="color: #ccc"
						:placeholder="searchKeywords ? searchKeywords : `搜索 ${searchTypeText[searchType]}`"
						@confirm="onSearchInputConfirmed" @input="onSearchInputChanged" focus />
				</view>
			</view>
		</view>

		<div class="tabs">
			<div @tap="
			        goodsData = [];
			        active_tab = 'goods';
			        cat_id = 1;
			        loadData();
			    " :class="{ active: active_tab == 'goods' }" class="tabs-item">
				商品
			</div>
			<div @tap="
                    newsData = [];
                    active_tab = 'new';
                    cat_id = 1;
                    getList();
                " :class="{ active: active_tab == 'new' }" class="tabs-item">
				资讯
			</div>
			<div @tap="
                    newsData = [];
                    active_tab = 'zan';
                    cat_id = 3;
                    getList();
                " :class="{ active: active_tab == 'zan' }" class="tabs-item">
				会员秀
			</div>
		</div>
		<view class="wanl-search">
			<view class="wanl-list">
				<view class="history padding-lr" v-if="isHistory">
					<view v-if="historyList.length > 0">
						<view class="title">
							<text>历史搜索</text>
							<text class="wlIcon-lajitong" @tap="removeHistory"></text>
						</view>
						<view class="list">
							<view v-for="(item, index) in historyList" :key="item.keywords"
								@tap="keywordsToList(item.keywords)">{{ item.keywords }}</view>
						</view>
					</view>
					<view>
						<view class="title">
							<text>热门搜索</text>
							<text class="wlIcon-guanzhu"></text>
						</view>
						<view class="list">
							<block v-for="(item, index) in searchList" :key="item.id">
								<view v-if="item.flag == 'hot'" class="action" @tap="keywordsToList(item.title)">
									<text>{{ item.title }}</text>
									<text class="cu-tag badge">hot</text>
								</view>
								<view @tap="keywordsToList(item.title)" v-else>
									<text>{{ item.title }}</text>
								</view>
							</block>
						</view>
					</view>
				</view>
				<view class="cu-list menu" v-else>
					<view class="cu-item" v-for="(item, index) in search.searchList" :key="item.keywords">
						<view class="content" @tap="keywordsToList(item.keywords)">
							<text class="text-sm">{{ item.keywords }}</text>
						</view>
					</view>
					<view class="cu-item arrow" v-for="(item, index) in search.categoryList" :key="item.id"
						@tap="categoryToList(item.id, item.name)" v-if="searchType !== 'find'">
						<view class="content">
							<text class="text-sm text-gray">{{ item.name }}</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-orange light">{{ item.name }}类目</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<div class="list" v-if="active_tab == 'goods'">
			<wanl-product :dataList="goodsData" :dataStyle="liststyle" :dataType="goodsType" />
		</div>
		<div class="list" v-if="active_tab == 'new'">

			<div class="list-item" v-for="(item, index) in newsData" :key="index">
				<div class="user-info">
					<div class="pic">
						<image :src="item.avatar" mode="scaleToFill" />
					</div>
					<div class="flex-col">
						<div style="color: #2e2e2e;">{{ item.nickname }}</div>
						<div style="color: #b3b3b3;">{{ item.create_time }}</div>
						<!-- <div class="dot">
                            <div class="dot-item"></div>
                            <div class="dot-item"></div>
                            <div class="dot-item"></div>
                        </div> -->
					</div>
				</div>
				<div style="color: #4d4d4d;" class="title">{{ item.good_name }}</div>
				<div style="color: #808080;" class="title">{{ item.content }}</div>

				<div class="image-list">
					<image v-for="(v, i) in item.img" :key="i" :src="v" mode="scaleToFill" />
				</div>
				<!-- <div class="icon">
                    <div class="icon-item">
                        <image src="" mode="scaleToFill" />
                        222
                    </div>
                    <div class="icon-item">
                        <image src="" mode="scaleToFill" />
                        222
                    </div>
                    <div class="icon-item">
                        <image src="" mode="scaleToFill" />
                        222
                    </div>
                </div> -->
			</div>
		</div>
		<div class="list" v-if="active_tab == 'zan'">
			<div class="list-item" v-for="(item, index) in newsData" :key="index">
				<div class="user-info">
					<div class="pic">
						<image :src="item.avatar" mode="scaleToFill" />
					</div>
					<div class="flex-col">
						<div style="color: #2e2e2e;">{{ item.nickname }}</div>
						<div class="dot" v-for="index of item.star_num" :key="index">
							⭐️
						</div>
					</div>
				</div>
				<div style="color: #4d4d4d;" class="title">{{ item.create_time }}</div>
				<div style="color: #808080;" class="title">{{ item.content }}</div>
				<div class="image-list">
					<image v-for="(v, i) in item.img" :key="i" :src="v" mode="scaleToFill" />
				</div>
				<div class="remark" v-if="item.remark">{{ item.remark}}</div>
				<div class="tips">
					{{item.good_name}}
					<image src="" mode="scaleToFill" />
				</div>
			</div>
		</div>
		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
	import ONavbar from "@/components/o-navbar/index.vue";
	export default {
		data() {
			return {
				searchType: 'goods',
				searchTypeText: {
					goods: '商品',
					groups: '资讯',
					find: '会员秀'
				},
				searchKeywords: '',
				isHistory: true, //历史记录&实时搜索
				searchList: {}, //热门搜索列表
				historyList: [], //历史记录列表
				search: {
					categoryList: {},
					searchList: {}
				},
				WanlScroll: 0, //记录页面滚动
				scrollStype: false, //滚动状态
				filterIndex: 0, //
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				liststyle: "col-1-10", //列表样式
				goodsData: [], //商品列表数据
				showRight: false,
				category: "",
				goodsType: "goods",
				empty: "没有找到任何宝贝",
				active_tab: "goods",
				params: {
					page: 1,
				},
				likeData: [],
				reload: false, //判断是否上拉
				last_page: 0,
				status: "loading",
				contentText: {
					contentdown: "",
					contentrefresh: "正在加载..",
					contentnomore: "没有更多数据了",
				},
				cat_id: 1,
				newsData: []
			};
		},
		onReady() {
			this.loadkeyword();
			this.historyList = uni.getStorageSync('search:history');
		},
		onLoad(option) {
			if (option.type) {
				this.goodsType = option.type;
			}
			if (option.search) {
				//如果搜索存在
				this.params.search = option.search;
				this.drawerParams.search = option.search;
			} else if (option.data) {
				var data = JSON.parse(option.data);
				this.drawerParams.category_id = data.category_id;
				this.category = data.category_name;
				this.params.filter.category_id = data.category_id;
				this.params.op.category_id = "in";
			} else {
				console.log("调试模式");
			}
			// 加载位置，后续版本开启加载写入全局
			// uni.getLocation({
			//     type: "wgs84",
			//     geocode: true,
			//     success: (mres) => {
			//         uni.request({
			//             url: "https://restapi.amap.com/v3/geocode/regeo",
			//             data: {
			//                 key: this.$wanlshop.config("amapkey"),
			//                 location: mres.longitude + "," + mres.latitude,
			//             },
			//             success: (res) => {
			//                 if (res.statusCode == 200) {
			//                     let address = res.data.regeocode.addressComponent;
			//                     this.drawerData.sameCity.name = address.province;
			//                 }
			//             },
			//         });
			//     },
			// });
			this.getList();
			this.loadData();
			if (this.goodsData.length == 0) {
				// this.loadlikeData();
			}
		},
		// 监听上拉
		onPullDownRefresh() {
			this.params.page = 1;
			this.reload = true;
			this.getList();
		},
		// 下拉刷新
		onReachBottom() {
			if (this.params.page >= this.last_page) {
				this.status = "noMore";
			} else {
				this.reload = false;
				this.contentText.contentdown = "上拉显示更多";
				this.params.page = this.params.page + 1; //页码+1
				this.status = "loading";
				this.getList();
			}
		},
		// 监听滚动
		onPageScroll(object) {
			if (object.scrollTop > this.WanlScroll) {
				this.scrollStype = false;
			} else {
				this.scrollStype = true;
			}
			if (object.scrollTop < 0) {
				this.scrollStype = false;
			}
			this.WanlScroll = object.scrollTop;
		},
		// 监听返回
		onUnload() {
			if (this.showRight) {
				this.closeDrawer();
				return true;
			}
		},
		methods: {
			async loadkeyword() {
				await uni.request({
					url: '/api/search/searchKey',
					success: res => {
						this.searchList = res.data;
					}
				});
			},
			async loadSearch(val) {
				await uni.request({
					url: '/api/search/searchKey',
					data: {
						search: val
					},
					success: res => {
						this.search = res.data;
						if (res.data.searchList.length != 0) {
							this.isHistory = false
						}
					}
				});
			},
			async setSearch(text) {
				await uni.request({
					url: '/api/search/setSearch',
					data: {
						keywords: text
					}
				});
			},
			// 存储历史数据
			setHistory(text) {
				// this.setSearch(text);
				this.loadkeyword(); //重新加载热门搜索
				let historyList = uni.getStorageSync('search:history');
				this.historyList = [];
				this.historyList = historyList; //重新加载历史记录
				let searchHistory = historyList;
				if (!searchHistory) searchHistory = [];
				let serachData = {};
				if (typeof text === 'string') {
					serachData = {
						keywords: text
					};
				} else {
					serachData = text;
				}
				// 判断数组是否存在，如果存在，那么将放到最前面
				for (var i = 0; i < searchHistory.length; i++) {
					if (searchHistory[i].keywords === serachData.keywords) {
						searchHistory.splice(i, 1);
						break;
					}
				}
				searchHistory.unshift(serachData);
				uni.setStorage({
					key: 'search:history',
					data: searchHistory
				});
			},
			// 清空历史数据
			removeHistory() {
				uni.showModal({
					title: '提示',
					content: '是否清理全部搜索历史？该操作不可逆。',
					success: res => {
						if (res.confirm) {
							this.historyList = [];
							uni.removeStorage({
								key: 'search:history'
							});
						}
					}
				});
			},
			async getList() {
				this.params.cat_id = this.cat_id;
				this.params.flag = "new";
				await uni.request({
					url: "/api/Xiaoyouquan/xyqList",
					data: this.params,
					success: (res) => {
						uni.stopPullDownRefresh();
						this.status = "more";
						this.newsData = this.reload ? res.data : this.newsData.concat(res.data); //数据 追加
						console.log(this.newsData);
						if (res.data.length == 0) {
							this.empty = `没找到与“${this.category}${this.params.search}"相关的宝贝`;
						}
						this.params.page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
					},
				});
			},
			//异步加载商品列表
			async loadData() {
				// this.params.good_type_id = 'good';
				this.params.region_name = uni.getStorageSync('city_name');
				await uni.request({
					url: "/api/good/goodlist",
					data: this.params,
					success: (res) => {
						uni.stopPullDownRefresh();
						this.status = "more";
						this.goodsData = this.reload ? res.data : this.goodsData.concat(res.data); //数据 追加
						console.log(this.goodsData);
						if (res.data.length == 0) {
							this.empty = `没找到与“${this.category}${this.params.search}"相关的宝贝`;
						}
						this.params.page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
					},
				});
			},
			// 滚动底部加载猜你喜欢
			async loadlikeData() {
				await uni.request({
					url: `/wanlshop/product/likes?pages=${this.goodsType}`,
					success: (res) => {
						this.likeData = res.data; //评论数据 追加
					},
				});
			},
			// 加载侧边栏数据
			async loadDrawer() {
				this.drawerParams.type = this.goodsType;
				await uni.request({
					url: "/wanlshop/product/drawer",
					data: this.drawerParams,
					success: (res) => {
						var brand = [],
							attribute = [];
						if (res.data.brand) {
							res.data.brand.forEach((item) => {
								var brandData = {
									id: item.id,
									name: item.name,
									fold: false, // 展开
									choice: false,
								};
								brand.push(brandData);
							});
						}
						if (res.data.attribute) {
							res.data.attribute.forEach((item) => {
								var value = [];
								item.value.forEach((vo) => {
									var valueData = {
										name: vo.name,
										choice: false,
									};
									value.push(valueData);
								});
								var attributeData = {
									name: item.name,
									value: value,
									fold: false,
								};
								attribute.push(attributeData);
							});
						}
						this.drawerData.brand = brand;
						this.drawerData.attribute = attribute;
					},
				});
			},
			//筛选点击
			tabClick(index) {
				if (this.filterIndex === index && index !== 3) {
					return;
				}
				this.filterIndex = index;
				if (index === 3) {
					this.priceOrder = this.priceOrder === 1 ? 2 : 1;
				} else {
					this.priceOrder = 0;
				}

				// 排序方式
				if (index === 0) {
					this.params.sort = "weigh";
					this.params.order = "desc";
				}
				if (index === 1) {
					this.params.sort = "sales";
					this.params.order = "desc";
				}
				if (index === 2) {
					this.params.sort = "createtime";
					this.params.order = "desc";
				}
				if (index === 3 && this.priceOrder === 1) {
					this.params.sort = "price";
					this.params.order = "desc";
				}
				if (index === 3 && this.priceOrder === 2) {
					this.params.sort = "price";
					this.params.order = "asc";
				}
				this.status = "loading";
				this.params.page = 1;
				this.reload = true;
				this.getList();
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0,
				});
			},
			// 打开抽屉，并且加载品牌和类目属性
			showDrawer() {
				this.showRight = true;
				if (!this.drawerType.first) {
					this.loadDrawer();
					this.drawerType.first = true;
				}
			},
			// 点击抽屉
			onDraver(e) {
				var index = e.currentTarget.dataset.attribute,
					key = e.currentTarget.dataset.key;
				if (key == "brand" || key == "city") {
					// 取消所有选项,选中下面
					this.drawerData[key].forEach((item, keys) => {
						keys != index ? (item.choice = false) : "";
					});
					// 取消同城
					this.drawerData.sameCity.choice = false;
					this.drawerData[key][index].choice = !this.drawerData[key][index].choice;
				} else if (key == "sameCity") {
					// 取消所有城市选项
					this.drawerData.city.forEach((item) => {
						item.choice = false;
					});
					this.drawerData.sameCity.choice = !this.drawerData.sameCity.choice;
				} else {
					// 取消所有选项,选中下面
					this.drawerData.attribute[index].value.forEach((item, keys) => {
						keys != key ? (item.choice = false) : "";
					});
					this.drawerData.attribute[index].value[key].choice = !this.drawerData.attribute[index].value[key]
						.choice;
				}
			},
			// 提交抽屉
			onDrawerTo() {
				// 查询价格
				if (this.drawerData.price.low != "" && this.drawerData.price.high != "") {
					this.params.filter.price = this.drawerData.price.low + "," + this.drawerData.price.high;
					this.params.op.price = "BETWEEN";
				} else {
					delete this.params.filter.price;
					delete this.params.op.price;
				}
				// 查询地址
				var cityData = "";
				this.drawerData.city.forEach((item) => {
					if (item.choice) {
						cityData = item.name;
					}
				});
				if (cityData) {
					this.params.filter["shop.city"] = "%" + cityData + "%";
					this.params.op["shop.city"] = "LIKE";
				} else if (this.drawerData.sameCity.choice) {
					this.params.filter["shop.city"] = this.drawerData.sameCity.name;
					this.params.op["shop.city"] = "LIKE";
				} else {
					delete this.params.filter["shop.city"];
					delete this.params.op["shop.city"];
				}
				// 查询品牌
				var brandData = "";
				this.drawerData.brand.forEach((item) => {
					if (item.choice) {
						brandData = item.id;
					}
				});
				if (brandData) {
					this.params.filter.brand_id = brandData;
					this.params.op.brand_id = "=";
				} else {
					delete this.params.filter.brand_id;
					delete this.params.op.brand_id;
				}
				// 查询属性
				var attributeData = [];
				this.drawerData.attribute.forEach((item, index) => {
					// item.name
					item.value.forEach((vo, index) => {
						if (vo.choice) {
							attributeData.push("%" + vo.name + "%");
						}
					});
				});
				// 1.0.8升级 有此项无法查询
				if (attributeData.length > 0) {
					this.params.filter.category_attribute = attributeData.join(",");
					this.params.op.category_attribute = "LIKE";
				} else {
					delete this.params.filter.category_attribute;
					delete this.params.op.category_attribute;
				}
				this.status = "loading";
				// 1.0.8升级
				this.goodsData = [];
				this.params.page = 1;
				this.reload = true;
				this.getList();
				this.closeDrawer();
			},
			// 重置抽屉
			onDrawerReset() {
				this.drawerData.city.forEach((item) => {
					item.choice = false;
				});
				this.drawerData.sameCity.choice = false;
				this.loadDrawer();
			},
			// 点击抽屉标题
			onDraverTitle(e) {
				var stype = e.currentTarget.dataset.key;
				if (stype === "city") {
					this.drawerType[stype] = !this.drawerType[stype];
				} else {
					this.drawerData.attribute[stype].fold = !this.drawerData.attribute[stype].fold;
				}
			},
			// 关闭抽屉
			closeDrawer() {
				this.showRight = false;
			},
			search() {
				this.$wanlshop.to(`/pages/page/search?type=${this.goodsType}`, "fade-in", 100);
			},
			editListstyle() {
				this.liststyle = this.liststyle == "col-1-10" ? "col-2-20" : "col-1-10";
			},
		},
		components: {
			ONavbar,
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		.list {
			padding: 10rpx;
			box-sizing: border-box;

			&-item {
				background: #fff;
				padding: 10rpx;
				box-sizing: border-box;
				margin-top: 20rpx;

				.user-info {
					display: flex;
					align-items: center;
					width: 100%;
					height: 100%;
					position: relative;

					.flex-col {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
					}

					.pic {
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
						background: #214a75;
						margin-right: 20rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.dot {
						position: absolute;
						top: 50%;
						right: 20rpx;
						transform: translateY(-50%);
						display: flex;
						align-items: center;

						&-item {
							width: 10rpx;
							height: 10rpx;
							border-radius: 50%;
							margin-right: 10rpx;
							background: #999;
						}
					}
				}

				.remark {
					margin-top: 20rpx;
					background: #f5f5f5;
					color: #808080;
					padding: 20rpx;
					box-sizing: border-box;
					border-radius: 20rpx;
				}

				.title {
					margin-top: 30rpx;
				}

				.image-list {
					display: flex;
					padding: 20rpx 0;
					box-sizing: border-box;
					border-bottom: 1rpx solid #eee;

					image {
						width: 210rpx;
						height: 210rpx;
						margin-right: 20rpx;
					}
				}

				.tips {
					background: #f2f7fa;
					font-size: 26rpx;
					color: #005a93;
					height: 80rpx;
					padding: 20rpx;
					box-sizing: border-box;
					border-radius: 20rpx;
					margin-top: 20rpx;
					position: relative;

					image {
						position: absolute;
						right: 20rpx;
						top: 50%;
						transform: translateY(-50%);
					}
				}

				.icon {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 80rpx;

					&-item {
						image {
							width: 34rpx;
							height: 34rpx;
							margin-right: 20rpx;
						}
					}
				}
			}
		}

		.tabs {
			display: flex;
			background: #fff;
			height: 80rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			justify-content: space-between;

			&-item {
				min-width: 80rpx;
				height: 100%;
				line-height: 80rpx;
				text-align: center;
				margin-right: 20rpx;
			}

			.active {
				color: #214a75;
				border-bottom: 1rpx solid #214a75;
			}
		}
	}
</style>